<!-- Teacher_StudyCourseNote.html -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>课程章节</title>
	<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
	<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
	<style type="text/css">
		html,body{
			margin: 0px;
			padding: 0px;
			height: 100%;
			/*background-color: white;*/
			/*font-family: "微软雅黑","宋体","Tahoma",Arial;*/
			/*color: #333333;*/
		}
		div,img,ul,li,ol,span,p,a,dl,dd,dt{
			margin: 0px;
			padding: 0px;
			border: 0px;
		}
		ul,li,ol,dl,dd,dt{
			list-style: none;
		}
		.overfl{
			overflow: hidden;
		}
		.fl{float: left;}
		.fr{float: right;}
		.hide{display: none;}
		textarea{border:none; padding:0; outline:none; background:none; resize:none;}
		.outer{
			background-color: #fff;
			height: 100%;
			color: #787d82;
			overflow: hidden;
		}
		.mainTop{
			height: 35%;
			width: 100%;
			background: #14191e;
		}
		.mainBot{
			width: 100%;
			/*height: 65%;*/
			background: #fff;
			overflow: hidden;
			padding-bottom: 10px;
		}
		.main_nav{
			width: 100%;
			overflow: hidden;
			line-height: 3.6rem;
			font-size: 1.4rem;
			border-bottom: 0.2rem solid #e5e5e5;
		}
		.main_nav li{
			float: left;
			text-align: center;
			width: 25%;
		}
		.choiced{
			color: #0daff7;
			background: url(../img/blueLine.png) bottom center no-repeat;
			background-size: 2.5em;
		}
		.mainDiv{
			overflow: hidden;
			overflow-y: scroll;
			width: 100%;
			/*height: 88%;*/
		}
		.mainDiv .zhangjie{
			width: 90%;
			display: block;
			margin: 0px 5%;
		}
		.mainDiv .wenda,.mainDiv .biji ,.mainDiv .ziliao{
			width: 90%;
			margin: 0px 5%;
			/*display: none;*/
		}
		.ListParent li{
			cursor: pointer;
			overflow: hidden;
			position: relative;
			clear: left;
		}
		.ListParent .ListA{
			font-size: 1.2rem;
			padding: 1.0rem 0px 0.8rem;
			text-align: justify;
		}
		.ListParent .ListB,.ListParent .ListC{
			font-size: 1.2rem;
		/*	line-height: 3.6rem;*/
			/*line-height: 100%;*/
			padding-top: 0.8rem ;
			padding-bottom: 0.8rem;
		}
		.ListParent .ListB,.ListParent .ListC{padding-left: 1.4rem;}
		/*.ListParent .ListC{padding-left: 2.8rem;}*/
		.ListParent .ListB a{
			width: 70%;
		}
		.ListParent .ListC a{
			width: 68.4%;
		}
		.ListB .iconSJ,.ListC .iconSJ{
			float: left;
			vertical-align: middle;
			margin-right: 0.5rem;
			display: block; 
			width: 1.0rem;
			height: 100%;
		}
		.ListB .iconSJ img,.ListC .iconSJ img{
			width: 1.0rem;
			height: 0.8rem;
		}
		.ListParent .ListB span,.ListParent .ListC span{
			float: right;
			/*line-height: 3.6rem;*/
			/*line-height: 100%;*/
			height: 100%;
		}
		.ListParent li a{
			/*overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;*/
			float: left;
			display: block;
			/*line-height: 3.6rem;*/
			color: #787d82;
			text-decoration: none;
		}
		.ListParent .ListA span:nth-child(1){
			/*width: 80%;*/
			width: 100%;
			/*overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;*/
			float: left;
			display: block;
			/*line-height: 100%;*/
			color: #787d82;
			text-decoration: none;
		}
		.ListParent li span:nth-child(2){
			float: left;
		}
		.topHeight{
			width: 100%;
		}
		.Divtit{
			font-size: 1rem;
			padding-top: 3%;
		}
		.wendaArea{
			width: 100%;
			height: 100px;
			margin: 10px 0 4px 0;
			border: 1px solid #d6d6d6;
			/*display: block;*/
			/*#0cb0f6*/
			padding: 2%;
			font-size: 14px;
			/*line-height: 2.6rem;*/
			color: #787d82;
		}
		.submit{
			width: 80px;
			height: 30px;
			line-height: 1.2rem;
			background-color: #0cb0f6;
			color: #fff;
			border: 0px;
			font-size: 14px;
			float: right;
			border-radius: .2rem;
			outline: none;
		}
		.wendaTop{
			height: 33%;
		}
		.wendaBot{
			/*height: 66%;*/
			overflow: hidden;
			/*overflow-y: scroll;*/
			margin: 0px auto;
		}
		.wenda_List{
			border-bottom: 1px dotted #0cb0f6;	
			margin-bottom: 1.0rem;
		}
		.wenda_List li{
			line-height: 24px;
			font-size: 14px;
		}
		.wendaAutor{
			padding: 0px 1.0rem 0px 0px;
		}


		.ziliaoBot{
			height: 100%;
			padding: 1.0rem 5%;
		}
		.ziliaoBot a{
			color: #787d82;
			text-decoration: none;
		}
		.ziliaoBot a:hover{
			text-decoration: underline;
		}

		.btnMore{
			line-height: 3.6rem;
			font-size: 1.2rem;
			text-align: center;
			display: block;
			color: #787d82;
			text-decoration:none;
		}
		.learnStatus{
			height: 100%;
			width: 1.4rem;
			vertical-align: middle;
			float: left;
		}
        .nameLabel{
            margin-top: 10px;
            margin-left: 8px;
            position: absolute;
            font-size: 14px;
            color: #222;
        }
        .contentDiv{
            /*margin-left: 15px;*/
            font-size: 14px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /*-webkit-line-clamp: 3;*/
            -webkit-box-orient: vertical;
            color: #222;
            word-wrap:break-word;
        }
        .timeSpan{
            /*display: block;*/
            margin-top: 5px;
            /*margin-left: 15px;*/
            color: #666;
            font-size: 12px;
        }
        .question_detail{
        	background-color: white;
        	padding: 10px;
        	/*border-bottom: 1px solid #ddd;*/
        }
        .right-span{
        	margin-left: 60px;
        }
        /*.answer-div{
        	background-color: white;
        }*/
        .bottom-div{
        	height: 50px;
        	padding: 10px;
        	background-color: white;
        	position: fixed;
        	left: 0;
        	bottom: 0;
        	width: 100%;
        }
        .bottom-div .bottom-div-content{
        	background-color: #f0f0f0;
        	border: 1px solid #d9d9d9;
        	border-radius: 3px;
        	padding: 4px 10px;
        }
        .bottom-div .bottom-div-title{
        	font-size: 14px;
        	color: #999;
        	line-height: 14px;
        	margin-left: 20px;
        }
        .bottom-div .bottom-div-icon{
        	width: 16px;
        	position: absolute;
        	left: 20px;
        	top: 17px;
        }
        .bottom-blank-div{
        	height: 50px;
        }
	</style>
</head>
<body>
	<!-- <div class="mainBot">
		<div class="mainDiv">
			<div class="mainList biji">
				<div class="wendaTop">
					<div class="overfl topHeight">
						<p class="Divtit">请写下您的笔记内容：</p>
						<textarea id="user_note" class="wendaArea"></textarea>
						<button class="submit" onclick="submitClick()">提交</button>
					</div>
				</div>
			</div>
		</div>
	</div> -->
	<ul id="noteList" class="mui-table-view">
		 <!-- <li class="mui-table-view-cell">
		 	<div class="answer-div">
    			<div class="contentDiv">笔记内容</div>
    			<span class="timeSpan">发表于2017.07.28</span>
    			<span class="timeSpan right-span">编辑</span>
    			<span class="timeSpan right-span">删除</span>
			</div>
		 </li> -->
	</ul>
	<div class="noSign"  id="noData"  hidden="hidden">
		<!-- <img src="../../image/icon_img.png" width="60%"> -->
		<p class="font16 top_15 base_dark_grey" >
			该课程暂无笔记
		</p>
	</div>
	<div class="loadFailure" hidden="hidden" id="noNet">
		<!-- <img src="../../image/icon_img01.png" width="60%"> -->
		<p class="" >
			数据加载失败
		</p>
		<p>
			请检查您的网络
		</p>
		<button type="button" class="mui-btn mui-btn-outlined" onclick="loadNewData()">
			重新加载
		</button>
	</div>
	<div class="bottom-div mui-table-view" onclick="onEditNoteClick()">
		<div class="bottom-div-content">
			<img class="bottom-div-icon" src="../../image/icon_bottom_edit.png">
			<span class="bottom-div-title">
				记录笔记
			</span>
		</div>
	</div>
	<div class="bottom-blank-div"></div>
</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/timeStampTool.js"></script>
<script type="text/javascript">
	var page = 1;
	var rows = 10;
	var refreshCount = 0;
	var noteDatas = new Array();
	apiready = function(){
//	    SendBehaviorTrajectoriesNotifi('0', '笔记列表', '023');
	    loadNewData();
	    setRefreshHeader(); 
		setPullUpRefresh();
		setupNotifi();
	}
	function onEditNoteClick(){
//	    SendBehaviorTrajectoriesNotifi('0', '添加笔记', '024');
		api.openFrame({
		    name: 'Teacher_StudyCourseEditTextarea',
		    url: 'Teacher_StudyCourseEditTextarea.html',
		    pageParam: api.pageParam,
		    bounces: false
		});
		api.setFrameAttr({
		    name: 'Teacher_StudyCourseEditTextarea',
		    hidden: false
		});
	}
		

	
	function setupNotifi(){
		api.addEventListener({
		    name: 'RefreshNoteNotifi'
		}, function(ret, err) {
		    var noteid = ret.value.noteid;
		    var notecomment = ret.value.notecomment;
		    $('#commentid' + noteid).text(notecomment);
		});
		api.addEventListener({
		    name: 'sureRemoveNotifi'
		}, function(ret, err) {
		    var noteData = ret.value;
		    if (noteData.deletetype == 'note') {
		    	deleteNote(noteData);
		    }
		});
		api.addEventListener({
		    name: 'refreshNoteNotifi'
		}, function(ret, err) {
		    loadNewData();
		});
	}
	function loadData(){
		var jid = $api.getStorage('cfnetppjxid');
		if (api.pageParam.isxueba == 1) {
			jid = '419';
		}
		var listParams = {
			jid : jid,
			uid : $api.getStorage('cfnetppuid'),
			cid : api.pageParam.courseid,
			page : page,
			rows : rows
		};
		// alert(JSON.stringify(listParams));
		cfnetppPOST(url_noteList, listParams, true, function(data, status){
			// alert(JSON.stringify(data));
			api.refreshHeaderLoadDone();
			if (status == 'success') {
				if (data.status == true && data.code == 200) {
					if (page == 1) {
						noteDatas = new Array();
					}
					var notes = data.json.list;
					if (notes != null && notes.constructor == Array && notes.length > 0) {
						var currentIndex = noteDatas.length;
						refreshCount = notes.length;
						noteDatas = noteDatas.concat(notes);
						var noteListHtml = '';
						for (var i = currentIndex; i < noteDatas.length; i++) {
							var note = noteDatas[i];
							noteListHtml += noteHtmlWithData(note, i);
						}
						if (page == 1) {
							$('#noteList').html(noteListHtml);
						}else{
							$('#noteList').append(noteListHtml);
						}
						addCellClick();
						$('.noSign').hide();
		    			$('.loadFailure').hide();
					}else{
						if (page == 1) {
							$('.noSign').show();
			    			$('.loadFailure').hide();
						}
					}
				}else{
					if (page == 1) {
						$('.noSign').show();
		    			$('.loadFailure').hide();
					}
				}
			}else{
				if (page == 1) {
					$('.noSign').hide();
	    			$('.loadFailure').show();
				}
			}
		});
	}
	function noteHtmlWithData(data, index){
		var timeStr = timeWithStamp(data.ctime.toString());
		// return '<ul index="'+index+'" class="wenda_List">\
		// 				<li>'+data.comment+'</li>\
		// 				<li><span class="wendaTime">发表于'+timeStr+'</span></li>\
		// 			</ul>';
		return	'<li id="'+data.id+'" index="'+index+'" class="mui-table-view-cell">'+
		 	'<div class="answer-div">'+
    			'<div id="commentid'+data.id+'" class="contentDiv">'+data.comment+'</div>'+
    			'<span class="timeSpan">发表于'+timeStr+'</span>'+
    			'<span index="'+index+'" class="timeSpan right-span edit-span">编辑</span>'+
    			'<span index="'+index+'" class="timeSpan right-span delete-span">删除</span>'+
			'</div>'+
		 '</li>';
	}
	function addCellClick(){
		$('.edit-span').unbind('click');
		$('.edit-span').click(function(event){
			event.stopPropagation();
			var index = $(this).attr('index');
			var noteData = noteDatas[parseInt(index)];
			editNote(noteData);
		});
		$('.delete-span').unbind('click');
		$('.delete-span').click(function(event){
			event.stopPropagation();
			var index = $(this).attr('index');
			var noteData = noteDatas[parseInt(index)];
			setupDeletePage(noteData);
		});
	}
	function editNote(noteData){
		noteData["isxueba"] = api.pageParam.isxueba;
//		SendBehaviorTrajectoriesNotifi('0', '笔记列表', '023');
		api.openFrame({
		    name: 'Teacher_StudyCourseNoteEdit',
		    url: 'Teacher_StudyCourseNoteEdit.html',
		    rect: {
		        x: 0,
		        y: 66,
		        w: 'auto',
		        h: api.winHeight - 66
		    },
		    pageParam: noteData,
		    bounces: false
		});
	}
	function setupDeletePage(noteData){
		noteData["deletecontent"] = "是否确认删除该笔记？";
		noteData["deletetype"] = "note";
		api.openFrame({
		    name: 'deleteSomeData',
		    url: 'deleteSomeData.html',
		    pageParam: noteData,
		    bounces: false
		});
	}
	function deleteNote(noteData){
		var jid = $api.getStorage('cfnetppjxid');
		if (api.pageParam.isxueba == 1) {
			jid = '419';
		}
		var param = {
			cid : api.pageParam.courseid,
			id : noteData.id,
			jid : jid,
			uid : $api.getStorage('cfnetppuid'),
			pid : api.pageParam.planid
		}
		cfnetppPOST(url_deleteNote, param, true, function(data, status){
		    if($api.getStorage('cfnetSelectType')==0){//学生
			    param['message']="笔记"+"\""+notTen(noteData.comment)+"\"";
				SendBusinessOperationsLogNotifi('笔记列表页', '023', param, param, '', data, '学生删除笔记接口', '023-02')
			}else if($api.getStorage('cfnetSelectType')==1){//老师
			    param['message']="笔记";
				SendBusinessOperationsLogNotifi('笔记列表页', '023', param, param, '', data, '老师删除笔记接口', '023-05')
			}
			if (status == 'success') {
				if (data.code == 200) {
					$('#'+noteData.id).remove();
			    	if ($('#noteList').html() == '') {
			    		$('#noData').show();
			    	}
				}else{
					api.toast({
					    msg: '删除失败，请重试'
					});
				}
			}else{
				api.toast({
				    msg: '删除失败，请重试'
				});
			}
		});
	}
		//字符串截取10位
    function notTen(b) {
		var str = b;
		if (str.length > 13) {
			b = str.substr(0, 12) + '...';
			return b
		} else {
			return b
		}
    }
	function loadNewData(){
		page = 1;
		loadData();
	}
	function loadMoreData(){
		page++;
		loadData();
	}
	function deleteSpaceEnter(str){
		str = str.replace(/\s+/g, "");
		str = str.replace(/[\r\n]/g, "");
		return str;
	}
	function submitClick(){
		var noteText = $('#user_note').val();
		if (deleteSpaceEnter(noteText).length == 0) {
			api.toast({
			    msg: '不能提交空的笔记哦'
			});
			return;
		}
		var jid = $api.getStorage('cfnetppjxid');
		if (api.pageParam.isxueba == 1) {
			jid = '419';
		}
		var params = {
			jid : jid,
			uid : $api.getStorage('cfnetppuid'),
			cid : api.pageParam.courseid,
			pid : api.pageParam.planid,
			comment : noteText,
			vid : 1,
			tid : 0
		};
		api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '提交中...',
		    text: '',
		    modal: true
		});
		cfnetppPOST(url_addNote, params, false, function(data, status){
		   if($api.getStorage('cfnetSelectType')==0){//学生端
				params['message']="笔记"+"\""+notTen(noteText)+"\"";
				SendBusinessOperationsLogNotifi('笔记列表页', '023', params, params, '', data, '学生添加笔记接口', '023-01')
			}else if($api.getStorage('cfnetSelectType')==1){
				params['message']="笔记";
				SendBusinessOperationsLogNotifi('笔记列表页', '023', params, params, '', data, '老师添加笔记接口', '023-04')
			}
			api.hideProgress();
			if (status == 'success') {
				if (data.code == 200) {
					$('#user_note').val('');
					api.toast({
					    msg: '提交笔记成功'
					});
					loadNewData();
				}else{
					api.toast({
					    msg: '提交笔记失败，请重试'
					});
				}
			}else{
				api.toast({
				    msg: '提交笔记失败，请重试'
				});
			}
		});
	}
				//字符串截取10位
    function notTen(b) {
		var str = b;
		if (str.length > 13) {
			b = str.substr(0, 12) + '...';
			return b
		} else {
			return b
		}
    }
	//下拉刷新
	function setRefreshHeader() {
		api.setRefreshHeaderInfo({
			visible : true,
			bgColor : '#ccc',
			textColor : '#fff',
			textDown : '下拉刷新...',
			textUp : '松开刷新...',
			showTime : true
		}, function(ret, err) {
			loadNewData();
		});
	}
	// 上拉加载
	function setPullUpRefresh() {
		api.addEventListener({
			name : 'scrolltobottom'
		}, function(ret, err) {
			if (refreshCount >= rows) {
				loadMoreData();
			}
		});
	}
</script>
</html>